<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>基本信息</span>
                <span></span>
            </div>

            <el-descriptions title="">
                <el-descriptions-item label="采购编号">{{form.purchaseNo|filterNull}}</el-descriptions-item>
                <el-descriptions-item :span="2" label="客户名称">{{form.customerName|filterNull}}</el-descriptions-item>

                <el-descriptions-item :span="3" label="合格证">
                    <ImageCommon disabled v-model="form.qualifiedCardOss"></ImageCommon>
                    <!--                    <ImagePreview :src="getUrl(form.qualifiedCardOss)"></ImagePreview>-->
                </el-descriptions-item>
                <el-descriptions-item label="合格证编码">{{ form.qualifiedNo|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车架号">{{ form.vinNo|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="发动机号码">{{ form.engineNo|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="发证日期">{{ form.issuanceDate|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆种类">{{ form.vehicleCategory|filterNull }}</el-descriptions-item>
<!--                <el-descriptions-item label="车辆类型">-->
<!--                    <dict-tag-->
<!--                        :options="dict.type.car_type"-->
<!--                        :value="form.carType"/>-->
<!--                </el-descriptions-item>-->
                <el-descriptions-item label="车辆性质">
                    <dict-tag
                        :options="dict.type.car_nature"
                        :value="form.carNature"/>
                </el-descriptions-item>
                <el-descriptions-item label="品牌车系车型">{{ form.brandName || '' }}/{{
                        form.seriesName || ''
                    }}/{{ form.modelName || '' }}
                </el-descriptions-item>
                <!--                <el-descriptions-item label="行驶证所有人">{{ form.ownerName|filterNull }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="年款">{{ form.styleYear|filterNull }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="配置">{{ form.config|filterNull }}</el-descriptions-item>-->
                <el-descriptions-item label="档位">{{ form.gearPosition|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="座位数">{{ form.seatNum|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="燃油类型">
                    <dict-tag
                        :options="dict.type.fuel_type"
                        :value="form.fuelType"/>
                </el-descriptions-item>
                <el-descriptions-item label="排量">{{ form.liter|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="环保标准">{{ form.environmentalStandards|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="外观颜色">{{ form.exteriorColor|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="内饰颜色">{{ form.interiorColor|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆级别">{{ form.carLevel|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆随车物品">{{ form.carAccompanying|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="备用钥匙数量">{{ form.spareKeyNum|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="进口车/国产车">
                    <dict-tag
                        :options="dict.type.domestic_imported"
                        :value="form.domesticImported"/>
                </el-descriptions-item>
                <!--                <el-descriptions-item label="车辆状态">{{ form.businessType|filterNull }}</el-descriptions-item>-->
                <el-descriptions-item label="车辆产权">{{ form.propertyRightName|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆归属">{{ form.ascription|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="车辆大区">{{
                        form.region|filterNull
                    }}/{{ form.provinceName|filterNull }}/{{ form.cityName|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="车辆运营">{{ form.operationsName|filterNull }}</el-descriptions-item>
                <el-descriptions-item :span="3" label="备注">{{ form.remark|filterNull }}</el-descriptions-item>
                <el-descriptions-item :span="3" label="附件">
                    <ImageCommon disabled v-model="form.attachmentOss"></ImageCommon>
                </el-descriptions-item>
            </el-descriptions>

        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">返回</el-button>
            <!--          <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        </div>

    </div>
</template>

<script>


import {qualifiedCardDetail} from "@/api/purchaseManage/certificateList";

export default {
    name: "CertificateDetail",
    dicts: ['car_nature', 'fuel_type', 'car_type', 'domestic_imported'],
    data() {
        return {
            buttonLoading: false,
            form: {}
        };
    },
    watch:{
        '$route':{
            handler(val){
                // console.log('this.$route', this.$route)

                if(val && val.name==this.$options.name){
                    if (this.$route.query && this.$route.query.qualifiedCardId && !this.$route.query.tabClick) {
                        this.getOldData(this.$route.query.qualifiedCardId)
                    }
                    else if(!this.$route.query.tabClick){
                        this.form = {}
                    }
                }
            },
            immediate:true,
            deep:true
        }
    },
    // created() {
    //     this.getOldData(this.$route.query.qualifiedCardId)
    // },
    methods: {
        cancel() {
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        submitForm() {

        },
        getOldData(qualifiedCardId) {
            qualifiedCardDetail(qualifiedCardId).then(res => {
                this.form = res.data
            })
        },
        getUrl(ossid) {
            ossid = String(ossid)
            if (ossid && ossid.indexOf(",") != -1) {
                let split = ossid.split(",");

                let res = this.form.ossVos.filter(item => {
                    for (let splitElement of split) {
                        if (item.ossId == splitElement) {
                            return item
                        }
                    }

                }).map(item => {
                    return item.url
                })
                console.log('aaa', res)
                return res

            } else {
                if (this.form.ossVos && this.form.ossVos.length) {
                    return this.form.ossVos.find(item => {
                        if (item.ossId == ossid) {
                            return item
                        }
                    })?.url
                }
            }
        },
    }
};
</script>


<style lang="scss" scoped>


</style>
